<template>
  <div class="upload-images">
    <draggable :list="imageList" v-bind="{ animation: 200}" :group="{name:dragName}">
      <div v-for="(item,index) in imageList" class="upload_item" :style="`width: ${width}`">
        <my-image
            :width="width" :height="height"
            :src="$getImgUrl(item.uri)"
            :is-preview="false"
            @click.native="$refs.imageViewer.open(index)"
        />
        <i class="el-icon-error" @click="onImagesRemove(index)"/>
      </div>
    </draggable>
    <el-upload

        v-if="isShow"
        list-type="picture-card"
        :limit="limit"
        :action="uploadImageUrl"
        :headers="{Authorization}"
        :file-list="imageList"
        :show-file-list="false"
        :multiple="limit!==1"
        :on-success="onSuccess"
        :on-error="onError"
        :accept="acceptType"
    >
      <i slot="default" class="el-icon-plus"/>
    </el-upload>
    <my-image-viewer ref="imageViewer" :list="imageViewerList"/>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import MyImageViewer from '@/components/MyImageViewer'
  import fileApi from '@/api/file'
  import { getToken } from '@/utils/auth'

  export default {
    name: 'UploadImages',
    components: {
      draggable,
      MyImageViewer
    },
    props: {
      // 最大允许上传个数 -1不限制
      limit: {
        type: Number,
        default: 1
      },
      value: {},
      acceptType: {
        type: String,
        default: 'image/*'
      },
      dragName: {
        type: String,
        default: 'imageList'
      },
      width: {
        type: String,
        default: '125px'
      },
      height: {
        type: String,
        default: '125px'
      }
    },
    data() {
      return {
        imageList: [],
        uploadImageUrl: fileApi.uploadImageUrl,
        Authorization: getToken()
      }
    },
    /*watch: {
      value: {
        immediate: true,
        handler(list) {
          if (list) {
            if (Array.isArray(list)) {
              list = list.filter(item => item)
              this.imageList = list.map(item => {
                return { uri: item }
              })
            } else {
              this.imageList = [{ uri: list }]
            }
          } else {
            this.imageList = []
          }
        }
      }
    },*/
    computed: {
      imageViewerList() {
        return this.imageList.map(item => item.uri)
      },
      isShow() {
        if (this.limit === 1) {
          return this.imageList.length === 0
        } else if (this.limit === -1) {
          return true
        } else {
          return this.imageList.length < this.limit
        }
      }
    },
    methods: {
      setImageList(list) {
        if (list) {
          if (Array.isArray(list)) {
            list = list.filter(item => item)
            this.imageList = list.map(item => {
              return { uri: item }
            })
          } else {
            this.imageList = [{ uri: list }]
          }
        } else {
          this.imageList = []
        }
      },
      onImagesRemove(index) {
        this.imageList.splice(index, 1)
      },
      onSuccess(res, file, fileList) {
        if (res.code === 0) {
          file.uri = file.response.data.uri
          this.imageList.length = 0
          this.imageList.push(...fileList)
          if (this.limit === 1) {
            this.$emit('input', this.imageList[0].uri)
          } else {
            this.$emit('input', this.imageList.map(i => i.uri))
          }
        } else {
          const index = fileList.findIndex(item => {
            return (item.response && file.response.code === item.response.code)
          })
          fileList.splice(index, 1)
          this.$message({
            message: res.msg || 'Error',
            type: 'error',
            duration: 2 * 1000
          })
        }
      },
      onError() {
        this.$message({
          message: '图片上传失败',
          type: 'error',
          duration: 2 * 1000
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .upload-images {
    display: flow-root;
    margin-bottom: -15px;

    ::v-deep .el-upload {
      width: 125px;
      height: 125px;
      line-height: 125px;
      float: left;
      margin-bottom: 15px;
    }

    .upload_item {
      position: relative;
      float: left;
      margin-right: 15px;
      margin-bottom: 15px;

      .el-image {
        width: 125px;
        height: 125px;
        border-radius: 5px;
        cursor: pointer;
        display: block;
      }

      .el-icon-error {
        position: absolute;
        right: -8px;
        top: -8px;
        font-size: 20px;
        color: #F56C6C;
        cursor: pointer;
      }
    }
  }
</style>
